<template>
  <t-modal
    title="列表"
    width="1346px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="mark-table-container"
    v-bind="footer"
    forceRender
  >
    <div class="curve-modal-body">
      <div class="screen-search">
        <div class="left">
          <div class="screen-item">
            <div>标记名称：</div>
            <a-input
              v-model.trim="condition.markName"
              placeholder="请输入"
              style="width: 320px"
            ></a-input>
          </div>
          <div class="screen-item">
            <div>标记类型：</div>
            <a-select
              v-model="condition.markType"
              placeholder="请选择"
              :loading="typeLoading"
              style="width: 320px"
              showSearch
              :filter-option="filterOption"
              allowClear
            >
              <a-select-option
                :value="item.dicItemCode"
                v-for="item in typeSource"
                :key="item.dicItemCode"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
          </div>
          <div class="screen-item">
            <a-button class="cu-btn-primary" icon="search" @click="search()">
              查询
            </a-button>
            <a-button class="cu-btn-filter" icon="reload" @click="reset()">
              重置
            </a-button>
          </div>
        </div>
        <div class="right">
          <a-button
            class="margin-bottom-xs"
            icon="download"
            @click="exportExcel()"
            :loading="exportLoading"
          >
            导出
          </a-button>
        </div>
      </div>
      <div class="table-container">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column title="标记图片">
            <template #default="{ row }">
              <div class="mark-img">
                <img :src="row.markImage" v-if="row.markImage" />
                <div class="shadow-button" @click="handelPreview(row)">
                  预览
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="markName" title="标记名称"> </vxe-column>
          <vxe-column field="markTypeDesc" title="标记类型"> </vxe-column>
          <vxe-column field="componentId" title="关联BIM"> </vxe-column>
          <vxe-column field="markDesc" title="标记描述"> </vxe-column>
          <vxe-column field="creator" title="创建人"> </vxe-column>
          <vxe-column field="createTime" title="创建时间"> </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 图片预览弹窗 -->
    <previewImage
      :imgSrc="imgPreview"
      :visible.sync="imgVisible"
    ></previewImage>
  </t-modal>
</template>

<script>
//标记列表弹窗
import { pageMarker, exportMarkerExcel } from "@/api/bim";
import { getDicItemByCode } from "@/api/common.js";
import previewImage from "@/components/TopVUI/custom/previewImage";
import { downLoadFileByArraybuffer } from "@/utils/util";
export default {
  inject: ["currentProject", "sceneSource"],
  components: {
    previewImage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Object,
      default() {
        return { footer: null };
      },
    },
  },
  data() {
    return {
      condition: {
        //标记名称
        markName: "",
        //标记类型
        markType: undefined,
      },
      typeSource: [],
      typeLoading: false,
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //图片预览弹窗
      imgVisible: false,
      imgPreview: "",
      exportLoading: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //批量导出
    exportExcel() {
      this.exportLoading = true;
      let { orgCode } = this.currentProject();
      let { sceneId } = this.sceneSource();
      let { markName, markType = "" } = this.condition;
      exportMarkerExcel({
        sceneId,
        orgCode,
        markName,
        markType,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "标记列表");
        })
        .catch((_) => {})
        .finally((_) => {
          this.exportLoading = false;
        });
    },
    handelPreview(row) {
      let { markImage } = row;
      if (!markImage) {
        return this.$message.warning("暂无图片", 1.5);
      }
      this.imgVisible = true;
      this.imgPreview = markImage;
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    reset() {
      this.condition.markName = "";
      this.condition.markType = undefined;
      this.search();
    },
    getData() {
      Promise.all([this.getTypeData(), this.getTableData()]);
    },
    //查询标记类型列表
    getTypeData() {
      return new Promise((resolve, reject) => {
        this.typeLoading = true;
        getDicItemByCode({ code: "MarkType" })
          .then((res) => {
            let { data } = res;
            this.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.typeSource = [];
            reject();
          })
          .finally((_) => {
            this.typeLoading = false;
          });
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { orgCode } = this.currentProject();
      let { sceneId } = this.sceneSource();
      let { markName, markType = "" } = this.condition;
      pageMarker({
        page,
        pageSize,
        proCode: orgCode,
        sceneId,
        markType,
        markName,
      })
        .then((res) => {
          this.tableData = res.data?.rows || [];
          this.pager.total = res.data?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //关闭弹窗
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.mark-table-container {
  .curve-modal-body {
    height: 694px;
    display: flex;
    flex-direction: column;
    .screen-search {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .screen-item {
          align-items: center;
          display: flex;
          margin: 0 0 10px 20px;
        }
      }
    }
    .table-container {
      flex: 1;
      .mark-img {
        margin: 0 auto;
        width: 40px;
        height: 40px;
        position: relative;
        overflow: hidden;
        .shadow-button {
          z-index: 11;
          position: absolute;
          top: 100%;
          left: 0;
          transition: 0.5s;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          background: rgba(0, 0, 0, 0.5);
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
        }
        &:hover {
          .shadow-button {
            top: 0;
            transition: 0.5s;
          }
        }
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }
      }
    }
  }
}
</style>
